<template>
  <!-- 有赞商城 -->
  <div v-loading="pageLoad">
    <el-button type="primary" @click="settDialog = true">
      {{ dialogTitle }}
    </el-button>
    <!-- 展示设置信息 -->
    <div class="setting_info">
      <!-- 消息提示 -->
      <el-alert
        close-text="知道了"
        show-icon
        :title="
          settingInfo.config_id
            ? '已完成设置，可点击上方编辑按钮进行编辑'
            : '当前还未设置，请点击上方设置按钮进行设置'
        "
      />
      <!-- App id -->
      <div class="flex_y_center" style="height: 30px">
        <div class="sett_title">App id：</div>
        <div>{{ settingInfo.app_id || '未设置' }}</div>
      </div>
      <!-- kdt_id -->
      <div class="flex_y_center" style="height: 30px">
        <div class="sett_title">kdt_id：</div>
        <div>{{ settingInfo.kdt_id || '未设置' }}</div>
        <el-button
          v-if="settingInfo.config_id"
          id="copy"
          data-clipboard-action="copy"
          :data-clipboard-text="copyTxt"
          size="small"
          style="margin-left: 10px"
          type="text"
          @click="copy"
        >
          复制
        </el-button>
      </div>
      <!-- client_id -->
      <div class="flex_y_center" style="height: 30px">
        <div class="sett_title">client_id：</div>
        <div>{{ settingInfo.client_id || '未设置' }}</div>
        <el-button
          v-if="settingInfo.config_id"
          id="copy"
          data-clipboard-action="copy"
          :data-clipboard-text="copyTxt"
          size="small"
          style="margin-left: 10px"
          type="text"
          @click="copy"
        >
          复制
        </el-button>
      </div>
      <!-- client_secret -->
      <div class="flex_y_center" style="height: 30px">
        <div class="sett_title">client_secret：</div>
        <div>{{ settingInfo.client_secret || '未设置' }}</div>
        <el-button
          v-if="settingInfo.config_id"
          id="copy"
          data-clipboard-action="copy"
          :data-clipboard-text="copyTxt"
          size="small"
          style="margin-left: 10px"
          type="text"
          @click="copy"
        >
          复制
        </el-button>
      </div>
      <!-- 回调地址 -->
      <!-- 临时放入得地址 -->
      <div class="flex_y_center" style="height: 30px">
        <div class="sett_title">回调地址：</div>
        <a href="https://dev.jbkl.com" target="_blank">https://dev.jbkl.com</a>
        <el-button
          v-if="settingInfo.config_id"
          id="copy"
          data-clipboard-action="copy"
          :data-clipboard-text="copyTxt"
          size="small"
          style="margin-left: 10px"
          type="text"
          @click="copy"
        >
          复制
        </el-button>
      </div>
    </div>

    <div style="text-align: center">
      <el-button @click="$emit('send')">返回</el-button>
    </div>

    <!-- 设置对话框 -->
    <el-dialog title="设置" :visible.sync="settDialog">
      <div>
        <!-- appid -->
        <div class="flex_y_center margin_btom">
          <div class="inp_title">
            <span>*</span>
            appid：
          </div>
          <el-input
            v-model="settingForm.app_id"
            placeholder="请输入店铺ID"
            style="width: 30%"
          />
        </div>
        <!-- kdt_id -->
        <div class="flex_y_center margin_btom">
          <div class="inp_title">
            <span>*</span>
            kdt_id：
          </div>
          <el-input
            v-model="settingForm.kdt_id"
            placeholder="请输入kdt_id"
            style="width: 30%"
          />
        </div>
        <!-- client_id -->
        <div class="flex_y_center margin_btom">
          <div class="inp_title">
            <span>*</span>
            client_id：
          </div>
          <el-input
            v-model="settingForm.client_id"
            placeholder="请输入client_id"
            style="width: 30%"
          />
        </div>
        <!-- client_secret -->
        <div class="flex_y_center margin_btom">
          <div class="inp_title">
            <span>*</span>
            client_secret：
          </div>
          <el-input
            v-model="settingForm.client_secret"
            placeholder="请输入client_secret"
            style="width: 30%"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="saveSettings">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getServiceDetail, addServiceConfig } from '@/api/mallyouzan'

  export default {
    props: {
      oId: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        pageLoad: false, // 控制加载样式显示隐藏
        settingInfo: {},

        settDialog: false, // 设置dialog显示隐藏
        configId: '', // 配置id（新建不传）
        serviceId: '', // 应用id
        templateId: '', // 应用配置模板id
        settingForm: {
          app_id: '',
          kdt_id: '',
          client_id: '',
          client_secret: '',
        },
        copyTxt: '', // 存放需copy的字符串
      }
    },
    computed: {
      dialogTitle() {
        return this.settingInfo.config_id ? '编辑' : '设置'
      },
    },
    watch: {
      // 监听dialog的打开，并判断当前是可编辑状态还是设置状态
      settDialog(newValue) {
        // 如果是打开dialog并处于编辑状态的话那么，进行赋值操作
        if (newValue && this.dialogTitle == '编辑') {
          for (let item in this.settingInfo) {
            if (
              item != 'service_id' &&
              item != 'template_id' &&
              item != 'config_id'
            )
              this.settingForm[item] = this.settingInfo[item]
          }
        } else if (!newValue && this.dialogTitle == '设置') {
          // 初始化设置表单数据为空字符串
          for (let item in this.settingForm) {
            this.settingForm[item] = ''
          }
        }
      },
    },
    mounted() {
      this.getDetail()
    },
    methods: {
      // 获取应用详情
      getDetail() {
        this.pageLoad = true

        const params = {
          id: this.oId,
        }
        getServiceDetail(params).then((res) => {
          // 判断，如果是input的话，那么用户没有设置，讲不进行赋值操作
          if (res.data.app_id != 'input') {
            this.settingInfo = res.data
          }
          this.configId = res.data.config_id || ''
          this.serviceId = res.data.service_id
          this.templateId = res.data.template_id
          this.pageLoad = false
        })
      },
      // 复制功能
      copy(event) {
        // 将点击
        this.copyTxt = event.path[2].childNodes[1].innerText
        let textUrl = new this.clipboard('#copy')
        textUrl.on('success', () => {
          this.$message({
            message: '复制成功',
            type: 'success',
          })
          textUrl.destroy()
        })

        textUrl.on('error', function (e) {
          this.$message.error('复制失败')
          e.clearSelection()
          textUrl.destroy()
        })
      },
      // 保存设置
      saveSettings() {
        for (let item in this.settingForm) {
          if (this.settingForm[item] == '') {
            this.$message.error('所有配置都是必填项')
            return
          }
        }

        let params = {
          config_id: this.configId,
          service_id: this.serviceId,
          template_id: this.templateId,
          config_value: JSON.stringify({ ...this.settingForm }),
        }
        addServiceConfig(params).then(() => {
          this.pageLoad = false
          this.settDialog = false
          this.getDetail()
        })
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }
  .margin_btom {
    margin-bottom: 15px;
  }
  .sett_title {
    color: rgba(0, 0, 0, 0.5);
  }
  .inp_title {
    width: 35%;
    text-align: right;
  }
  .copy_btn {
    font-size: 12px;
    color: dodgerblue;
    cursor: pointer;
    margin-left: 10px;
  }

  .setting_info {
    margin: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
  }
</style>
